import React,{useState,useEffect} from 'react';
import './useradd.css'
import axios from 'axios';
import { UserOutlined } from '@ant-design/icons';
import { Input, Avatar, Space, Select, Form } from 'antd';
import { DatePicker } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import {  Switch } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {useNavigate} from 'react-router-dom'
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY-MM-DD';
export default function Useradd() {
    const [petname, setPetname] = useState('')
    const [id, setId] = useState('')
    const [phone,setPhone]=useState('')
    const [avatar,setAvatar] = useState('')
    const [Realname,SetRealname]=useState('')
    const [idno,setIdno]=useState('')
    const [sex, setSex] = useState('')
    const [dateofbirth,setDateofbirth]=useState('')
    const [homeaddress,setHomeaddress]=useState('')
    const [brief,setBrief]=useState('')
    const [height,setHeight]=useState('')
    const [weight,setWeight]=useState('')
    const [originorbirthplace,setOriginorbirthplace]=useState('')
    const [nationid,setNationid]=useState('')
    const [educationid,setEducationid]=useState('')
    const [maritalid,setMaritalid]=useState('')
    const [occupation,setOccupation]=useState('')
    const [workplace,setWorkplace]=useState('')
    const [emergency,setEmergency]=useState('')
    const [contact,setContact]=useState('')
    const [status, setStatus] = useState(true)
    const [remark, setRemark] = useState('')
    const navigate = useNavigate()
    useEffect(()=>{
        getminzu(),
        geteducation(),
        getmarital()
    },[])
    //民族渲染
    const [minzu,setminzu]=useState([])
    const getminzu=()=>{
        axios.get(`http://localhost:3000/csc/minzus`).then(res => {
            console.log('获取数据成功', res.data.data)
            setminzu(res.data.data)
        })
    }
    //学历渲染
    const [xueli,setXueli]=useState([])
    const geteducation=()=>{
        axios.get(`http://localhost:3000/csc/wenhuas`).then(res => {
            console.log('获取数据成功', res.data.data)
            setXueli(res.data.data)
        })
    }
    //婚姻渲染
    const [hunyin,sethunyin]=useState([])
    const getmarital=()=>{
        axios.get(`http://localhost:3000/csc/hunyins`).then(res => {
            console.log('获取数据成功', res.data.data)
            sethunyin(res.data.data)
        })
    }
    //添加
    const add=()=>{
        const form={
            petname,
            id,
            phone,
            // avatar,
            Realname,
            idno,
            sex,
            // dateofbirth,
            homeaddress,
            brief,
            height,
            weight,
            originorbirthplace,
            nationid,
            educationid,
            maritalid,
            occupation,
            workplace,
            emergency,
            contact,
            status,
            remark
        }
        console.log(form);
        axios.post(`http://localhost:3000/csc/addlist`,form).then(res => {
            console.log('添加成功', res.data.data)
        })
    }
    //职业渲染
    // const [occupationlist,setoccupationlist]=useState([])
    return (
        <div className='csc_quan'>
            <div className="csc_waihe">
                <div className="csc_listdiv1">
                    <div >
                        <span className="csc_kuai"></span>
                        <span className='csc_span1'>新增用户信息</span>
                    </div>
                    <hr />
                    <div className="csc_content">
                        <p className='csc_p1'>基础信息</p>
                        <div>
                            <span className='csc_nicheng'>昵称</span>
                            <span><Input placeholder="请输入" className='useraddinput' value={petname} onChange={(e)=>{
                                setPetname(e.target.value)
                            }}/></span>
                            <span className='csc_ID'>ID</span>
                            <span><Input placeholder="请输入" className='useraddinput' value={id} onChange={(e)=>{
                                setId(e.target.value)
                            }} /></span>
                            <span className='csc_phone'>手机号码</span>
                            <span><Input placeholder="请输入" className='useraddinput' value={phone} onChange={(e)=>{
                                setPhone(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_touxiang'>头像</span>
                            <span>
                                <Space wrap size={16} className='csc_xiang'>
                                    <Avatar shape="square" icon={<UserOutlined />} />
                                </Space>
                            </span>
                            <span></span>
                            <span className='csc_zhenshi'>真实姓名</span>
                            <span><Input placeholder="请输入" className='useraddinput' value={Realname} onChange={(e)=>{
                                SetRealname(e.target.value)
                            }} /></span>
                            <span className='csc_shenfen'>身份证号</span>
                            <span><Input placeholder="请输入" className='useraddinput' value={idno} onChange={(e)=>{
                                setIdno(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_xingbie'>性别</span>
                            <Select placeholder="请选择" className='csc_addselect'
                            value={sex}
                            onChange={(value)=>{
                                setSex(value)
                            }}
                            >
                                <Select.Option value= {0}>男</Select.Option>
                                <Select.Option value={1}>女</Select.Option>
                            </Select>

                            <span className='csc_chu'>出生日期</span>
                            <DatePicker 
                                defaultValue={dayjs('2019-09-03', dateFormat)}
                                minDate={dayjs('2019-08-01', dateFormat)}
                                maxDate={dayjs('2020-10-31', dateFormat)}
                                className='csc_data'
                            />
                        </div>
                        <div>
                            <span className='csc_jia'>家庭住址</span>
                            <span><Input placeholder="请输入" className="csc_ting" value={homeaddress} onChange={(e)=>{
                                setHomeaddress(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_jian'>简介</span>
                            <span><Input placeholder="请输入" className="csc_jie" value={brief} onChange={(e)=>{
                                setBrief(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_shen'>身高</span>
                            <span><Input placeholder="请输入" className="csc_gao" value={height} onChange={(e)=>{
                                setHeight(e.target.value)
                            }} /></span>
                            <span className='csc_ti'>体重</span>
                            <span><Input placeholder="请输入" className="csc_zhong" value={weight} onChange={(e)=>{
                                setWeight(e.target.value)
                            }} /></span>
                            <span className='csc_ji'>籍贯</span>
                            <span><Input placeholder="请输入" className="csc_guan" value={originorbirthplace} onChange={(e)=>{
                                setOriginorbirthplace(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_min'>民族</span>
                            <Select placeholder="请选择" className='csc_zu' 
                                value={nationid}
                                onChange={(value)=>setNationid(value)}
                            >
                                {
                                    minzu.map(item=>{
                                        return <Select.Option value={item._id} key={item.id}>{item.name}</Select.Option>
                                    })
                                }                            
                            </Select>
                            <span className='csc_wen'>文化程度</span>
                            <Select placeholder="请选择" className='csc_hua'
                            value={educationid}
                            onChange={(value)=>setEducationid(value)}
                            >
                            {
                                    xueli.map(item=>{
                                        return <Select.Option value={item._id} key={item.id}>{item.name}</Select.Option>
                                    })
                                }        
                            </Select>
                            <span className='csc_hun'>婚姻情况</span>
                            <Select placeholder="请选择" className='csc_yin'
                            value={maritalid}
                            onChange={(value)=>setMaritalid(value)}
                            >
                                {
                                    hunyin.map(item=>{
                                        return <Select.Option value={item._id} key={item.id} >{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </div>
                        <div>
                            <span className='csc_zhi'>职业</span>
                            <span><Input placeholder="请输入" className="csc_ye" value={occupation} onChange={(e)=>{
                                setOccupation(e.target.value)
            
                            }} /></span>
                            <span className='csc_gong'>工作单位</span>
                            <span><Input placeholder="请输入" className="csc_zuo" value={workplace} onChange={(e)=>{
                                setWorkplace(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_jin'>紧急联系人</span>
                            <span><Input placeholder="请输入" className="csc_lian" value={emergency} onChange={(e)=>{
                                setEmergency(e.target.value)
                            }} /></span>
                            <span className='csc_xi'>联系人电话</span>
                            <span><Input placeholder="请输入" className="csc_dian" value={contact} onChange={(e)=>{
                                setContact(e.target.value)
                            }} /></span>
                        </div>
                        <div>
                            <span className='csc_qi'>其它信息</span>
                        </div>
                        <div>
                            <span className='csc_zhuang'>状态</span>
                            <span>
                            <Space direction="vertical" className='csc_tai'>
                                <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked value={status} onChange={()=>{
                                     setStatus(status)
                                }}/>
                            </Space>
                            </span>
                            <span className='csc_deng'>登陆密码</span>
                            <span><Input placeholder="请输入" className="csc_lu"
                             /></span>
                        </div>
                        <div>
                            <span className='csc_bei'>备注</span>
                            <span><Input placeholder="请输入" className="csc_zhu" value={remark} onChange={(e)=>{
                                setRemark(e.target.value)}} /></span>
                        </div>
                        <hr />
                        <div className='csc_btnadd'>
                            <button className='csc_btn6' onClick={add} >保存</button>
                            <button className='csc_btn7' onClick={()=>navigate('/zhu/navpage/userlist')}>返回</button>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    )
}